import { StyleSheet, View, FlatList, Text } from 'react-native'
import React, { PureComponent } from 'react';
import { pTx } from "../utils/dimensions"
import { emojisList } from "../utils/emojis"


export class emojiSelectorList extends PureComponent {
    render() {
        return (<View style={styles.container}>
            <FlatList
                style={{ flex: 1 }}
                renderItem={({ item }) => {
                    return <View style={{ flex: 1 }}>
                        <Text style={styles.emojis} onPress={() => this.props.state(item)}>{item}</Text>
                    </View>
                }}
                data={emojisList}
                numColumns={8}
                keyExtractor={(item, index) => index}
            />
        </View>
        )
    }
}

export default emojiSelectorList

const styles = StyleSheet.create({
    container: {
        height: pTx(194),
        paddingHorizontal: pTx(15),
        paddingTop: pTx(5),
    },
    emojis: {
        color: "#000",
        fontSize: pTx(30)
    }
})

